<template>
  <el-scrollbar height="70vh">
    <div class="message-container">
      <!-- 消息分类标签 -->
      <div class="message-tabs">
        <el-tag
          v-for="tab in tabs"
          :key="tab.value"
          :type="activeTab === tab.value ? 'primary' : 'info'"
          class="tab-item"
          @click="activeTab = tab.value"
        >
          {{ tab.label }} ({{ filteredMessages(tab.value).length }})
        </el-tag>
      </div>

      <!-- 消息列表 -->
      <el-card
        v-for="message in filteredMessages(activeTab)"
        :key="message.id"
        class="message-card"
        shadow="hover"
        :class="{ unread: !message.read }"
      >
        <div class="message-header">
          <el-tag :type="getMessageType(message.type)" size="small">
            {{ getTypeName(message.type) }}
          </el-tag>
          <span class="message-time">{{ formatTime(message.time) }}</span>
          <el-button
            v-if="!message.read"
            type="text"
            size="small"
            @click="markAsRead(message.id)"
          >
            标记已读
          </el-button>
        </div>

        <h3 class="message-title">{{ message.title }}</h3>
        <p class="message-content">{{ message.content }}</p>

        <div class="message-footer">
          <el-button
            v-if="message.actions"
            v-for="action in message.actions"
            :key="action.text"
            :type="action.type || 'text'"
            size="small"
            @click="handleAction(message, action)"
          >
            {{ action.text }}
          </el-button>
        </div>
      </el-card>

      <!-- 空状态 -->
      <el-empty
        v-if="filteredMessages(activeTab).length === 0"
        description="暂无消息"
      />
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

// 消息类型定义
interface Message {
  id: number;
  title: string;
  content: string;
  type: "system" | "alert" | "notice" | "task";
  time: string | Date;
  read: boolean;
  actions?: Array<{
    text: string;
    type?: string;
    handler?: () => void;
  }>;
}

// 模拟消息数据
const messages = ref<Message[]>([
  {
    id: 1,
    title: "系统升级通知",
    content: "系统将于今晚24:00至次日6:00进行升级维护，请提前保存您的工作。",
    type: "system",
    time: new Date(Date.now() - 3600000),
    read: false,
  },
  {
    id: 2,
    title: "新任务分配",
    content: "您有一个新的任务需要处理：用户反馈问题调查。",
    type: "task",
    time: new Date(Date.now() - 86400000),
    read: false,
    actions: [
      { text: "查看任务", type: "primary", handler: () => navigateToTask() },
      { text: "忽略" },
    ],
  },
  {
    id: 3,
    title: "安全警告",
    content: "检测到异常登录行为，如非本人操作请立即修改密码。",
    type: "alert",
    time: new Date(Date.now() - 172800000),
    read: true,
  },
  // 可以添加更多消息...
]);

// 标签页选项
const tabs = [
  { label: "全部", value: "all" },
  { label: "系统", value: "system" },
  { label: "告警", value: "alert" },
  { label: "通知", value: "notice" },
  { label: "任务", value: "task" },
];

const activeTab = ref("all");

// 过滤消息
const filteredMessages = (type: string) => {
  if (type === "all") return messages.value;
  return messages.value.filter((msg) => msg.type === type);
};

// 标记为已读
const markAsRead = (id: number) => {
  const msg = messages.value.find((m) => m.id === id);
  if (msg) msg.read = true;
};

// 处理消息动作
const handleAction = (message: Message, action: any) => {
  if (action.handler) {
    action.handler();
  } else {
    ElMessage.info(`执行动作: ${action.text}`);
  }
  markAsRead(message.id);
};

// 辅助函数
const getMessageType = (type: string) => {
  const types: Record<string, string> = {
    system: "",
    alert: "danger",
    notice: "warning",
    task: "success",
  };
  return types[type] || "";
};

const getTypeName = (type: string) => {
  const names: Record<string, string> = {
    system: "系统",
    alert: "告警",
    notice: "通知",
    task: "任务",
  };
  return names[type] || type;
};

const formatTime = (time: string | Date) => {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
};

// 模拟导航函数
const navigateToTask = () => {
  ElMessage.success("正在跳转到任务页面...");
  // 实际项目中替换为路由跳转
};
</script>

<style scoped>
.message-container {
  padding: 10px;
}

.message-tabs {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab-item {
  cursor: pointer;
  user-select: none;
}

.message-card {
  margin-bottom: 12px;
  transition: all 0.3s;
}

.message-card.unread {
  border-left: 3px solid var(--el-color-primary);
  background-color: rgba(64, 158, 255, 0.05);
}

.message-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}

.message-time {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-left: auto;
}

.message-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.message-content {
  margin: 0;
  font-size: 14px;
  color: var(--el-text-color-regular);
  line-height: 1.5;
}

.message-footer {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
</style>
